<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#FFFFFF" safe-area-inset-bottom>
    <template #top>
      <uv-navbar placeholder title="商品列表" :autoBack="true"></uv-navbar>
      <view class="search">
        <uv-search placeholder="请输入商品名称" v-model="formData.keyword" :customStyle="formData.customStyle" @custom="custom"
          height="82rpx" :showAction="false" @search="custom" @blur="custom"></uv-search>
      </view>
      <view class="tabs">
        <uv-tabs :list="tabsList" :current="current" @click="getTabs" lineColor="transparent"
          :activeStyle="formData.activeStyle" :inactiveStyle="formData.inactiveStyle" :itemStyle="formData.itemStyle">
          <template v-slot:right>
            <view class="p-x-12" @tap="toast">
              <u-icon :name="ASSETSURL + 'more.png'" :customStyle="{ 'font-weight': '500', color: '#000' }" size="28rpx"
                label="更多" labelPos="left" label-size="28rpx"></u-icon>
            </view>
          </template>
        </uv-tabs>
      </view>
      <view class="sortNameImage">
        <view class="sort" v-for="(item, index) in formData.sortList" :key="index" @click="getSort(item)">
          <view class="nameImage" :class="item.active == sort ? 'sortActive' : ''">
            <view class="name">
              {{ item.name }}
            </view>
            <view class="icon" v-if="item.active == sort">
              <uv-image :fade="false" width="26rpx" height="28rpx" :src="ASSETSURL + 'sortIcon.png'"></uv-image>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view>
      <productList :list="dataList" />
    </view>
  </z-paging>
</template>

<script setup>
import {
  getProductList
} from '@/api/api';
import {
  ref,
  onMounted,
  reactive
} from 'vue';
import {
  useStore
} from 'vuex';
import {
  onReachBottom,
  onShow,
  onReady,
  onLoad
} from '@dcloudio/uni-app';
import {
  os,
  sys
} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const paging = ref(null);
const dataList = ref([]);
const sort = ref(1);
const formData = reactive({
  keyword: '',
  customStyle: {
    width: '686rpx',
    height: '82rpx',
    margin: '0 auto'
  },
  activeStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '700',
    'font-size': '28rpx'
  },
  inactiveStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '500',
    'font-size': '28rpx',
    color: '#B5B5B5'
  },
  itemStyle: {
    height: '47rpx',
    'line-height': '47rpx',
    padding: '0 50rpx 0 0',
    'box-sizing': ' border-box'
  },
  sortList: [{
    name: '价格排序',
    icon: 'price',
    price_order: true, //价格排序 asc 升序 desc 降序
    sales_order: true, //价格排序 asc 升序 desc 降序
    active: 1
  },
  {
    name: '销量排序',
    icon: 'price',
    price_order: true, //销量排序 asc 升序 desc 降序
    sales_order: true, //销量排序 asc 升序 desc 降序
    active: 2
  }
  ]
});
const current = ref(0);
const tabsList = ref(null);
const id = ref(null); //分类id

onLoad((ope) => {
  console.log(ope, 'opeopeope');
  if (ope.name) {
    tabsList.value = [{
      name: ope.name,
      id: ope.id
    }];
  }
  if (ope.children) {
    tabsList.value = JSON.parse(decodeURIComponent(ope.children));
  }
  if (ope.id) {
    id.value = ope.id;
  }
  if (ope.inx) {
    current.value = ope.inx;
  }
});
const queryList = (page, limit) => {
  let data = {
    page,
    limit,
    keyword: formData.keyword,
    category_id: id.value,
    price_order: formData.sortList[sort.value - 1].price_order ? 'asc' : 'desc',
    sales_order: formData.sortList[sort.value - 1].sales_order ? 'asc' : 'desc'
  };
  getProductList(data).then((res) => {
    console.log(res, '----商品列表----');
    paging.value.complete(res.data.data);
  });
};
//tabs切换
const getTabs = (e) => {
  console.log(e, '----tabs切换------');
  current.value = e.index;
  id.value = e.id;
  paging.value.reload();
};
//更多按钮
const toast = () => {
  route({
    type: 'tab',
    url: 'pages/mall/mall'
  });
  // uni.showToast({
  //   title: '点击了',
  //   icon: 'none'
  // });
};
// 排序
const getSort = (e) => {
  formData.sortList.forEach((item) => {
    if (item.active == 1) {
      item.price_order = !item.price_order;
    } else if (item.active == 2) {
      item.sales_order = !item.sales_order;
    }
  });
  sort.value = e.active;
  paging.value.reload();
};
// 搜索
const custom = (e) => {
  paging.value.reload();
};
</script>

<style lang="scss">
.tabs {
  padding: 0 32rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
}

.sortNameImage {
  display: flex;
  margin-top: 30rpx;

  .sort {
    margin-left: 32rpx;

    .nameImage {
      display: flex;
      align-items: center;
      padding: 10rpx 23rpx;
      box-sizing: border-box;
      color: #999999;
      border: 2rpx solid #999999;
      border-radius: 12rpx;

      .name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28rpx;
        vertical-align: middle;
      }

      .icon {
        margin-left: 9rpx;
      }
    }
  }
}

.sortActive {
  color: #1e1e1e !important;
  border: 2rpx solid #1e1e1e !important;
}
</style>